<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 首页 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
	<view
		class="container flex-column"
		:style="{'--theme-color': themeColor}"
		v-show="loadEnd"
	>
		<!-- 标题栏 -->
		<title-bar
			:hideTitle="true"
			backgroundColor="#FFF"
		></title-bar>
		<!-- 内容区 -->
		<view class="container-main safe-padding flex-item flex-column">
			<view
				class="main-address flex align-items-center"
				:style="{height: titleBarHeight + 'px'}"
				@click="toSelectCity()"
			>
				<text class="text text-ellipsis">{{currentCity.city || "请选择"}}</text>
				<image
					class="icon"
					src="/static/down.png"
					mode="aspectFit"
				></image>
			</view>
			<view class="main-map flex-item">
				<map
					id="map"
					class="map-box"
					:latitude="currentLocation.latitude"
					:longitude="currentLocation.longitude"
					:scale="mapScale"
					:markers="markersList"
					:show-location="true"
					@regionchange="regionchange"
				></map>
				<view
					class="map-label-box flex align-items-center"
					@click="toSelectAddress(1)"
					v-if="formData.from_address"
				>
					<view class="box-text text-ellipsis-more">{{formData.from_address}}</view>
					<image
						class="box-icon"
						src="/static/right_round.png"
						mode="aspectFit"
					></image>
				</view>
				<view
					class="map-label-point"
					v-else
				></view>
				<view class="map-label-line"></view>
				<view class="map-frame">
					<view class="frame-group">
						<view
							class="group-invitation"
							@click="toInvitation()"
							v-if="inviteCashbackStatus == 1"
						>
							<image
								class="invitation-image"
								src="/static/passenger/invitation.png"
								mode="aspectFit"
							></image>
						</view>
						<view
							class="group-security flex align-items-center"
							v-if="iconShield"
							@click="toSecurity()"
						>
							<view class="background"></view>
							<view
								class="icon"
								:style="{'background-image': 'url('+ iconShield +')'}"
							></view>
							<text class="text">安全中心</text>
						</view>
						<image
							class="group-location"
							src="/static/location.png"
							mode="aspectFit"
							@click="getAuthSetting()"
						></image>
					</view>
					<view
						class="frame-order flex align-items-center"
						@click="toOrderList()"
						v-if="pendingCount && parseInt(pendingCount) > 0"
					>
						<view class="order-point"></view>
						<view class="order-text text-ellipsis flex-item">您有{{pendingCount}}个订单正在等待接单</view>
						<view class="order-btn">查看</view>
					</view>
				</view>
			</view>
			<view class="main-column">
				<view class="column-screen flex">
					<view
						class="screen-item flex flex-center"
						:class="{active: formData.type == 1}"
						@click="changeScreen(1)"
					>
						<image
							class="item-icon"
							src="/static/passenger/realtime_w.png"
							mode="aspectFit"
							v-if="formData.type == 1"
						></image>
						<image
							class="item-icon"
							src="/static/passenger/realtime.png"
							mode="aspectFit"
							v-else
						></image>
						<text class="item-text">实时订单</text>
					</view>
					<view
						class="screen-item flex flex-center"
						:class="{active: formData.type == 2}"
						@click="changeScreen(2)"
					>
						<image
							class="item-icon"
							src="/static/passenger/reservation_w.png"
							mode="aspectFit"
							v-if="formData.type == 2"
						></image>
						<image
							class="item-icon"
							src="/static/passenger/reservation.png"
							mode="aspectFit"
							v-else
						></image>
						<text class="item-text">预约订单</text>
					</view>
				</view>
				<view class="column-content">
					<view class="content-card">
						<view
							class="card-star flex align-items-center"
							@click="toSelectAddress(1)"
						>
							<view class="star-point"></view>
							<view
								class="star-text flex-item text-ellipsis"
								v-if="formData.from_address"
							>从<text class="text">{{formData.from_address}}出发</text></view>
							<view
								class="star-text flex-item text-ellipsis"
								v-else
							><text class="text">正在获取上车位置...</text></view>
						</view>
						<view
							class="card-end flex align-items-center"
							@click="toSelectAddress(2)"
						>
							<view class="end-point"></view>
							<view class="end-input placeholder flex-item text-ellipsis">输入你的目的地</view>
						</view>
						<view class="card-label flex">
							<view
								class="label-item flex align-items-center"
								@click="openDepartureTimeModal()"
								v-if="formData.type == 2"
							>
								<view class="item-bg"></view>
								<view
									class="item-icon"
									:style="{'background-image': 'url('+ iconTime +')'}"
									v-if="iconTime"
								></view>
								<view class="item-text flex-item text-ellipsis">
									<text
										class="text"
										v-if="departureTime.dayName"
									>{{departureTime.dayName}} {{departureTime.hour}}:{{departureTime.minute}}</text>
									<text
										class="text"
										v-else
									>出发时间</text>
								</view>
								<image
									class="item-right"
									src="/static/right.png"
									mode="aspectFit"
								></image>
							</view>
							<view class="label-item flex align-items-center">
								<view class="item-bg"></view>
								<view
									class="item-icon"
									:style="{'background-image': 'url('+ iconDriver +')'}"
									v-if="iconDriver"
								></view>
								<view
									class="item-text flex-item text-ellipsis"
									@click="openDriversNumberModal()"
								>
									<text class="text">司机数量</text>
									<text class="text">|</text>
									<text class="text">{{formData.driver_number}}名</text>
								</view>
								<image
									class="item-right"
									src="/static/right.png"
									mode="aspectFit"
								></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<tab-bar></tab-bar>
		<!-- 弹窗区 -->
		<block>
			<departure-time-modal
				ref="departureTimeModal"
				@onChange="pageChange"
				@confirm="selectDepartureTime"
			></departure-time-modal>
			<drivers-number-modal
				ref="driversNumberModal"
				@onChange="pageChange"
				@confirm="selectDriversNumber"
			></drivers-number-modal>
			<coupon-modal
				ref="couponModal"
				:show-data="couponList"
				@onChange="pageChange"
				@changeReceive="changeReceiveStatus"
			></coupon-modal>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
	import svgData from "@/common/svg.js"
	import titleBar from "@/pages/component/title-bar/title-bar.vue"
	import departureTimeModal from "@/pages/passenger/component/modal/departure-time.vue"
	import driversNumberModal from "@/pages/passenger/component/modal/drivers-number.vue"
	import couponModal from "@/pages/passenger/component/modal/coupon-receive.vue"
	import tabBar from "@/pages/component/tab-bar/tab-bar.vue"
	export default {
		components: {
			titleBar,
			departureTimeModal,
			driversNumberModal,
			couponModal,
			tabBar,
		},
		data() {
			return {
				// 加载完成
				loadEnd: false,
				// 页面是否阻止滚动
				pageShow: false,
				// 标题栏高度
				titleBarHeight: 0,
				// 地图缩放级别
				mapScale: 17,
				// 地图标记点
				markersList: [],
				// 当前地址
				currentLocation: {
					latitude: 39.904179,
					longitude: 116.40738,
				},
				// 出发时间
				departureTime: {},
				// 表单数据
				formData: {
					type: 1,
					city: "",
					from_address: "",
					from_lat: "",
					from_lng: "",
					to_address: "",
					to_lat: "",
					to_lng: "",
					driver_number: 1,
				},
				// 是否重新定位
				isResetLocation: false,
				// 待接单数量
				pendingCount: 0,
				// 优惠券列表
				couponList: [],
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				tencentMapKey: state => state.app.tencentMapKey,
				shareTitle: state => state.app.shareTitle,
				shareImage: state => state.app.shareImage,
				currentCity: state => state.app.currentCity,
				inviteCashbackStatus: state => state.app.inviteCashbackStatus,
				iconShield: state => {
					return svgData.svgToUrl("shield", state.app.themeColor)
				},
				iconTime: state => {
					return svgData.svgToUrl("time", state.app.themeColor)
				},
				iconDriver: state => {
					return svgData.svgToUrl("driver", state.app.themeColor)
				},
			})
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let windowInfo = uni.getWindowInfo()
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - windowInfo.statusBarHeight) * 2 + menuButtonInfo.height
			// #endif
			// #ifndef MP-WEIXIN
			this.titleBarHeight = 48
			// #endif
		},
		async onLoad(option) {
			if (option.wechat_id) uni.setStorageSync("wechat_id", option.wechat_id)
			this.currentLocation = this.currentCity
			if (this.$onLaunched) await this.$onLaunched
			this.getAuthSetting()
			this.loadEnd = true
			if (uni.getStorageSync("token")) this.getPendingCount()
			else this.pendingCount = 0
			if (getApp().globalData.showIndexCoupon) this.getCouponList()
		},
		onReady() {
			this.initMap()
		},
		onShow() {
			// #ifdef MP-WEIXIN
			wx.hideHomeButton();
			// #endif
			let pages = getCurrentPages();
			if (pages[pages.length - 1].$vm.selectAddress) {
				let item = pages[pages.length - 1].$vm.selectAddress
				this.currentLocation = {
					latitude: item.latitude,
					longitude: item.longitude,
				}
				this.formData.city = `${item.province}/${item.city}/${item.district}`
				this.formData.from_address = item.title
				this.formData.from_lat = item.latitude
				this.formData.from_lng = item.longitude
				this.getMarkersInfo()
				this.$store.commit('app/setCurrentCity', {
					...this.currentLocation,
					province: item.province,
					city: item.city,
					district: item.district,
				})
				this.mapScale = null;
				setTimeout(() => {
					this.mapScale = 17;
				}, 200);
				delete pages[pages.length - 1].$vm.selectAddress;
			} else if (this.loadEnd) {
				if (uni.getStorageSync("token")) {
					this.getPendingCount()
					if (getApp().globalData.showIndexCoupon) this.getCouponList()
				} else {
					this.pendingCount = 0
				}
				this.currentLocation = this.currentCity
				if (this.isResetLocation) {
					this.isResetLocation = false
					this.getAuthSetting()
				} else {
					this.getLocation(2)
				}
			}
		},
		onShareAppMessage() {
			return {
				title: this.shareTitle,
				imageUrl: this.shareImage,
			}
		},
		onShareTimeline() {
			return {
				title: this.shareTitle,
				imageUrl: this.shareImage,
			}
		},
		methods: {
			// 改变页面滚动状态
			pageChange(state) {
				this.pageShow = state
			},
			// 初始化地图
			initMap() {
				this._mapContext = uni.createMapContext("map", this);
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
				});
				this._mapContext.on("markerClusterCreate", () => {});
			},
			// 获取位置权限
			async getAuthSetting() {
				try {
					const permissionStatus = await this.$util.checkLocationPermission()
					if (permissionStatus == 1) {
						this.getLocation(1)
					} else {
						this.$util.setLocationPermission(permissionStatus, (result) => {
							// #ifdef MP-WEIXIN
							if (result) this.getLocation(1)
							else this.getLocation(2)
							// #endif
							// #ifdef APP
							if (result) this.isResetLocation = true
							else this.getLocation(2)
							// #endif
						})
					}
				} catch (error) {
					this.getLocation(2)
					uni.showToast({
						title: error.message,
						icon: 'none',
						duration: 2000,
					})
				}
			},
			// 获取位置信息
			getLocation(type) {
				if (!this.tencentMapKey) {
					setTimeout(() => {
						this.getLocation(type)
					}, 200);
					return
				}
				var qqmapsdk = new QQMapWX({
					key: this.tencentMapKey
				})
				var data = {
					get_poi: 1
				}
				if (type == 2 || type == 3) {
					data.location = {
						latitude: this.currentLocation.latitude,
						longitude: this.currentLocation.longitude,
					}
				}
				qqmapsdk.reverseGeocoder({
					...data,
					success: (res) => {
						const result = res.result
						if (type == 1) {
							this.currentLocation = {
								latitude: result.location.lat,
								longitude: result.location.lng,
							}
						}
						this.formData.city =
							`${result.ad_info.province}/${result.ad_info.city}/${result.ad_info.district}`
						this.formData.from_address = result.address_reference.landmark_l2.title
						this.formData.from_lat = result.location.lat
						this.formData.from_lng = result.location.lng
						this.getMarkersInfo()
						this.$store.commit('app/setCurrentCity', {
							...this.currentLocation,
							province: result.ad_info.province,
							city: result.ad_info.city,
							district: result.ad_info.district,
						})
						if (type != 3) {
							this.mapScale = null;
							setTimeout(() => {
								this.mapScale = 17;
							}, 200);
						}
					},
					fail: () => {
						uni.showToast({
							title: '位置获取失败',
							icon: 'none',
							duration: 2000,
						})
					},
				})
			},
			// 更改订单模式
			changeScreen(id) {
				this.formData.type = id
			},
			// 获取附近代驾列表
			getMarkersInfo() {
				this.$util.request("passenger.nearbyDriver", {
					lat: this.currentLocation.latitude,
					lng: this.currentLocation.longitude,
				}).then(res => {
					if (res.code == 1) {
						this.markersList = []
						res.data.forEach((item) => {
							this.markersList.push({
								id: item.id,
								latitude: item.driver_lat,
								longitude: item.driver_lng,
								iconPath: "/static/avatar.png",
								width: '28px',
								height: '28px',
							})
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取附近代驾列表 ', error)
				})
			},
			// 拖拽地图
			regionchange(obj) {
				if (obj.causedBy == "gesture" || obj.causedBy == "drag" || obj.causedBy == "scale") {
					if (obj.type == "begin") {
						this.formData.from_address = ""
						this.formData.from_lat = ""
						this.formData.from_lng = ""
					} else if (obj.type == "end") {
						this._mapContext.getCenterLocation({
							type: 'gcj02',
							success: (res) => {
								this.currentLocation = {
									latitude: res.latitude,
									longitude: res.longitude,
								}
								this.getLocation(3)
							},
						})
					}
				}
			},
			// 前往选择城市
			toSelectCity() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/public/select/province"
				})
			},
			// 跳转安全中心
			toSecurity() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/passenger/mine/security/index",
					isToken: true,
				})
			},
			// 跳转地址选择
			toSelectAddress(type) {
				let orderData = JSON.parse(JSON.stringify(this.formData))
				if (type == 2) {
					if (!orderData.city || !orderData.from_address) {
						uni.showToast({
							icon: "none",
							title: "请先选择起点"
						})
						return
					}
					if (orderData.type == 2) {
						if (this.departureTime.day) orderData.departureTime = this.departureTime
						else orderData.type = 1
					}
					getApp().globalData.advanceOrder = orderData
				}
				this.$util.toPage({
					mode: 1,
					path: "/pages/public/select/address?type=" + type,
					isToken: true,
				})
			},
			// 跳转订单列表
			toOrderList() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/passenger/order/index"
				})
			},
			// 打开选择出发时间弹窗
			openDepartureTimeModal() {
				if (!this.$util.verifyLogin()) return
				this.$refs.departureTimeModal.open(this.departureTime)
			},
			// 选择出发时间
			selectDepartureTime(value) {
				this.departureTime = value
			},
			// 打开选择司机数量弹窗
			openDriversNumberModal() {
				if (!this.$util.verifyLogin()) return
				this.$refs.driversNumberModal.open(this.formData.driver_number)
			},
			// 选择司机数量
			selectDriversNumber(value) {
				this.formData.driver_number = value
			},
			// 获取待接单数量
			getPendingCount() {
				this.$util.request("passenger.order.pendingCount").then(res => {
					if (res.code == 1) {
						this.pendingCount = res.data.count
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取待接单数量 ', error)
				})
			},
			// 获取优惠券列表
			getCouponList() {
				this.$util.request("passenger.coupon.indexList").then(res => {
					if (res.code == 1) {
						if (res.data.length) {
							this.couponList = res.data
							this.$nextTick(() => {
								this.$refs.couponModal.open()
							})
						} else {
							if (this.couponList.length) {
								this.couponList.forEach((item) => item.received = 1);
							}
							getApp().globalData.showIndexCoupon = false
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取优惠券列表 ', error)
				})
			},
			// 修改优惠券领取状态
			changeReceiveStatus(index) {
				this.$set(this.couponList[index], "received", 1)
			},
			// 跳转邀请用户
			toInvitation() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/passenger/mine/invitation/index"
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.container {
		height: 100vh;

		.container-main {
			position: relative;

			.main-address {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: 998;
				width: 100%;
				height: 0;
				padding: 0 25% 0 32rpx;
				background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.40) 100%);

				.text {
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}

				.icon {
					width: 24rpx;
					height: 24rpx;
					min-width: 24rpx;
					margin-left: 8rpx;
				}
			}

			.main-map {
				width: 100%;
				height: 100%;
				position: relative;

				.map-box {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}

				.map-frame {
					position: absolute;
					left: 32rpx;
					right: 32rpx;
					bottom: 48rpx;
					z-index: 9;

					.frame-group {
						position: relative;

						.group-invitation {
							position: absolute;
							right: 0;
							bottom: 112rpx;

							.invitation-image {
								width: 176rpx;
								height: 176rpx;
							}
						}

						.group-security {
							position: absolute;
							left: 0;
							bottom: 32rpx;
							background: #FFF;
							border-radius: 32rpx;
							overflow: hidden;
							padding-right: 20rpx;

							.background {
								background: var(--theme-color);
								opacity: .05;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
							}

							.icon {
								position: relative;
								z-index: 1;
								width: 64rpx;
								height: 64rpx;
								background-size: 64rpx;
							}

							.text {
								position: relative;
								z-index: 1;
								color: var(--theme-color);
								font-size: 24rpx;
								font-weight: 600;
								line-height: 34rpx;
								margin-left: 16rpx;
							}
						}

						.group-location {
							position: absolute;
							right: 0;
							bottom: 32rpx;
							width: 64rpx;
							height: 64rpx;
						}
					}

					.frame-order {
						margin-bottom: 32rpx;
						height: 96rpx;
						border-radius: 16rpx;
						background: #FFF;
						padding-left: 32rpx;

						.order-point {
							width: 16rpx;
							height: 16rpx;
							background: var(--theme-color);
							border-radius: 50%;
						}

						.order-text {
							margin-left: 16rpx;
							color: #242629;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.order-btn {
							margin-left: 24rpx;
							color: #FFF;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							height: 100%;
							padding: 0 48rpx;
							border-radius: 16rpx;
							background: var(--theme-color);
						}
					}
				}

				.map-label-line {
					position: absolute;
					left: 50%;
					top: 50%;
					z-index: 1;
					transform: translate(-50%, -100%);
					width: 8rpx;
					height: 38rpx;
					background: var(--theme-color);
				}

				.map-label-box {
					position: absolute;
					left: 50%;
					bottom: 50%;
					z-index: 2;
					transform: translate(-50%, -36rpx);
					border-radius: 8rpx;
					background: #FFF;
					box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.25);
					padding: 14rpx;
					max-width: 50vw;

					.box-text {
						color: #242629;
						text-align: center;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
						flex: 1;
					}

					.box-icon {
						margin-left: 8rpx;
						width: 24rpx;
						height: 24rpx;
						min-width: 24rpx;
					}
				}

				.map-label-point {
					position: absolute;
					left: 50%;
					bottom: 50%;
					z-index: 2;
					transform: translate(-50%, -36rpx);
					width: 32rpx;
					height: 32rpx;
					border: 8rpx solid var(--theme-color);
					border-radius: 50%;
					background: #FFF;
				}
			}

			.main-column {
				margin-top: -48rpx;
				position: relative;
				z-index: 99;

				.column-screen {
					border-radius: 32rpx 32rpx 0 0;
					overflow: hidden;

					.screen-item {
						background: #FFF;
						padding: 28rpx 0;
						width: calc(50% + 16rpx);
						position: relative;

						&:first-child::after {
							content: "";
							display: block;
							width: 0;
							height: 0;
							border-top: 48rpx solid transparent;
							border-left: 16rpx solid transparent;
							border-right: 16rpx solid var(--theme-color);
							border-bottom: 48rpx solid var(--theme-color);
							position: absolute;
							top: 0;
							right: 0;
						}

						&:last-child::after {
							content: "";
							display: block;
							width: 0;
							height: 0;
							border-top: 48rpx solid var(--theme-color);
							border-left: 16rpx solid var(--theme-color);
							border-right: 16rpx solid transparent;
							border-bottom: 48rpx solid transparent;
							position: absolute;
							top: 0;
							left: 0;
						}

						.item-icon {
							width: 32rpx;
							height: 32rpx;
						}

						.item-text {
							margin-left: 8rpx;
							color: #242629;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}

						&.active {
							background: var(--theme-color);
							width: calc(50% - 16rpx);

							.item-text {
								color: #FFF;
							}

							&::after {
								display: none;
							}
						}
					}
				}

				.column-content {
					padding: 32rpx;

					.content-card {
						padding: 32rpx;
						border-radius: 32rpx;
						background: #FFF;

						.card-star {
							padding-left: 32rpx;

							.star-point {
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background: var(--theme-color);
							}

							.star-text {
								margin-left: 16rpx;
								color: #242629;
								font-size: 28rpx;
								font-weight: 600;
								line-height: 40rpx;

								.text {
									color: var(--theme-color);
								}
							}
						}

						.card-end {
							margin-top: 32rpx;
							border-radius: 16rpx;
							border: 4rpx solid #242629;
							background: #FFF;
							padding: 24rpx 28rpx;

							.end-point {
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background: #242629;
							}

							.end-input {
								margin-left: 16rpx;
								color: #242629;
								font-size: 28rpx;
								font-weight: 600;
								line-height: 40rpx;

								&.placeholder {
									color: #8D929C;
								}
							}
						}

						.card-label {
							margin-top: 32rpx;

							.label-item {
								padding: 14rpx 16rpx;
								border-radius: 32rpx;
								position: relative;
								z-index: 1;
								margin-left: 14rpx;
								width: 100%;
								flex: 1;
								overflow: hidden;

								&:first-child {
									margin-left: 0;
								}

								.item-bg {
									position: absolute;
									top: 0;
									left: 0;
									right: 0;
									bottom: 0;
									z-index: -1;
									background: var(--theme-color);
									opacity: .05;
								}

								.item-icon {
									width: 24rpx;
									height: 24rpx;
									background-size: 24rpx;
								}

								.item-text {
									color: var(--theme-color);
									font-size: 24rpx;
									font-weight: 600;
									line-height: 34rpx;

									.text {
										margin-left: 16rpx;
									}
								}

								.item-right {
									margin-left: 16rpx;
									width: 24rpx;
									height: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>